<template>
	<view class="kjcg">
		<!-- <view id="map" ref="map" style="width: 100%; height: 100%"></view> -->
		<l-echart class="chart" ref="kjcgChart" @finished="init"></l-echart>
		<view class="customTooltips" :style="{ left: position[0] + 'px', top: position[1] + 'px' }" v-if="params.length && position.length && showTip">
			<view>这是个自定的tooltips</view>
			<view>{{ params[0]['axisValue'] }}</view>
			<view v-for="(item, index) in params" :key="index">
				<view>
					<text>{{ item.seriesName }}</text>
					<text>{{ item.value }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { getKjcgNumber } from '@/api/zhyp/statistics';
import * as echarts from 'echarts'; //4.9.0
import LEchart from '@/uni_modules/lime-echart/components/l-echart/l-echart.vue';
export default {
	components: { LEchart },
	data() {
		return {
			myChart: null,
			kzhcgData: [],
			cgdjData: [],
			XData: [],
			option: {
				  xAxis: {
				    type: "category",
				    data: [2017,2018,2019,2020,2021,2022,2023],
				    splitLine: {
				      show: true,
				      lineStyle: {
				        color: "rgba(199,199,200,0.5)",
				        type: "dashed",
				      },
				    },
				    axisLabel: {
				      //轴线的文本颜色
				      textStyle: {
				        color: "rgba(255,255,255,0.64)",
				        fontSize: 14,
				      },
				    },
				    axisTick: {
				      //x轴刻度相关设置
				      alignWithLabel: true,
				    },
				  },
				  yAxis: {
				    type: "value",
				    axisLabel: {
				      textStyle: {
				        color: "rgba(255,255,255,0.64)",
				        fontSize: 14,
				      },
				    },
				    // show: false,
				    // Y轴线
				    axisLine: {
				      show: false,
				    },
				    // y轴分割线
				    splitLine: {
				      // show: true,
				      lineStyle: {
				        color: "rgba(199,199,200,0.5)",
				        type: "dashed",
				      },
				    },
				  },
				
				  tooltip: {
				    trigger: "axis",
				    axisPointer: {
				      type: "cross",
				    },
						textStyle: {
							textShadowBlur : 0
						},
						renderMode: 'richText',
						position: (point, params, dom, rect, size) => {
							// 假设自定义的tooltips尺寸
							const box = [170, 170];
							// 偏移
							const offsetX = point[0] < size.viewSize[0] / 2 ? 20 : -box[0] - 20;
							const offsetY = point[1] < size.viewSize[1] / 2 ? 20 : -box[1] - 20;
							const x = point[0] + offsetX;
							const y = point[1] + offsetY;
								
							this.position = [x, y];
							this.params = params;
						},
				    padding: [5, 10],
				  },
				  legend: {
				    type: "scroll",
				    show: true,
				    // orient: "vertical",
				    selectedMode: true, //图例点击失效
				    right: 0,
				    top: 10,
				    textStyle: {
				      color: "#ffffff",
				      fontSize: 14,
				    },
				  },
				  grid: {
				    top: 35,
				    left: 50,
				    bottom: 25,
				    right: 0,
				  },
				  series: [
				    {
				      data: [0,0,0,0,0,0,0],
				      type: "line",
				      name: "可转化成果",
				      smooth: true,
				      symbol: "none", //折线图的点
				      color: "#29F1FA",
				      areaStyle: {
				        //设置区域样式
				        normal: {
				          //右，下，左，上
				          color: new echarts.graphic.LinearGradient(
				            0,
				            0,
				            0,
				            1,
				            [
				              {
				                offset: 0,
				                color: "rgba(11,197,197,0.32)",
				              },
				              {
				                offset: 1,
				                color: "rgba(11,197,197,0)",
				              },
				            ],
				            false
				          ),
				        },
				      },
				    },
				    {
				      data: [0,0,0,0,0,0,0],
				      type: "line",
				      name: "成果登记",
				      smooth: true,
				      symbol: "none",
				      color: "#1b7ef2",
				      areaStyle: {
				        //设置区域样式
				        normal: {
				          //右，下，左，上
				          color: new echarts.graphic.LinearGradient(
				            0,
				            0,
				            0,
				            1,
				            [
				              {
				                offset: 0,
				                color: "rgba(27,126,242,0.32)",
				              },
				              {
				                offset: 1,
				                color: "rgba(27,126,242,0)",
				              },
				            ],
				            false
				          ),
				        },
				      },
				    },
				  ],
				},
			showTip: false,
			position: [],
			params: [],
			code:'6103',
		};
	},
	async created() {
		await this.getData();
	},
	methods: {
		async getData() {
			if(this.XData.length) return
			const res = await getKjcgNumber();
			for (const item of res.rows) {
				this.XData = item.list.reverse();
			}
			for (const item of res.rows) {
				this.XData = item.list.map((item1) => item1.nianfen);
				if (item.name === '可转化成果') {
					this.kzhcgData = item.list.map((item1) => item1.num);
				} else if (item.name === '成果登记') {
					this.cgdjData = item.list.map((item1) => item1.num);
				}
			}
			this.option.xAxis.data = this.XData
			this.option.series[0].data = this.kzhcgData
			this.option.series[1].data = this.cgdjData
			this.$refs.kjcgChart.setOption(this.option)
		},
		init() {
			this.$refs.kjcgChart.init(echarts, (chart) => {
				setTimeout(() => {
					chart.setOption(this.option);
				}, 500);
				// 监听tooltip显示事件
				chart.on('showTip', (params) => {
					this.showTip = true;
				});
				chart.on('hideTip', (params) => {
					setTimeout(() => {
						this.showTip = false;
					}, 300);
				});
			});
		},
	}
};
</script>

<style lang="scss">
.kjcg {
	height: 376rpx;
	overflow: hidden;
}
</style>
